<template>
    <div>
        <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>生产过程控制</el-breadcrumb-item>
        <el-breadcrumb-item>生产操作员面板—按钮维护</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
        <el-row :gutter="10">
            <el-col span="4">
                <el-button type="primary" icon="el-icon-plus" @click="addDV">新增</el-button>
            </el-col>
        </el-row>
        <!-- 表格区域 -->
        <el-table stripe border
        ref="multipleTable"
        :data="podButtonList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
    <el-table-column prop="id" label="id" width="220" align="center">
    </el-table-column>
    <el-table-column prop="site" label="站点编号" width="220" align="center">
    </el-table-column>
    <el-table-column prop="pod_button_no" label="pod按钮编号" width="220" align="center">
    </el-table-column>
    <el-table-column prop="pod_button_name" label="pod按钮名称" width="220" align="center">
    </el-table-column>
    <el-table-column prop="pod_function" label="pod功能" width="240" align="center">
    </el-table-column>
    <el-table-column prop="create_time" label="创建时间" width="240" align="center">
      <template #default="scope">
            {{formatDate(scope.row.create_time)}}
      </template>
    </el-table-column>
    <el-table-column prop="by_user" label="创建人" width="220" align="center">
    </el-table-column>
    <el-table-column label="操作" width="120" align="center" fixed="right">
      <template #default="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区域 -->
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNow"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rowCount">
    </el-pagination>
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog title="新增" v-model="addDialogVisible" width="40%">
      <!-- 按钮二级对话框 -->
      <el-dialog
        title="按钮维护列表"
        v-model="addpodFunctiontDV"
        width="40%"
        append-to-body
      >
        <!-- 对话框内容 -->
        <el-table
          stripe
          border
          ref="multipleTable"
          :data="podFunctiontList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          size="small"
        >
          <el-table-column prop="id" label="id" width="60" align="center">
          </el-table-column>
          <el-table-column
            prop="site"
            label="站点编号"
            width="100"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="pod_function_no"
            label="pod功能编号"
            width="110"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="pod_function_name"
            label="pod功能名称"
            width="110"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="pod_function_url"
            label="pod功能路径"
            width="110"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            width="100"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="by_user"
            label="创建人"
            width="100"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
              <el-button size="mini" @click="addPodFunctiont(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNow"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rowCount"
        >
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addpodFunctiontDV = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 二级对话框结束 -->
      <!-- 对话框内容 -->
      <el-form
        :model="addForm"
        status-icon
        :rules="addFormrules"
        ref="addFormRef"
        label-width="140px"
      >
        <el-form-item label="所属站点" prop="site">
          <el-input v-model="addForm.site" placeholder="请选择所属站点"></el-input>
        </el-form-item>
        <el-form-item label="POD按钮编号" prop="pod_button_no">
          <el-input v-model="addForm.pod_button_no"  placeholder="请输入POD按钮编号"></el-input>
        </el-form-item>
        <el-form-item label="POD按钮名称" prop="pod_button_name">
          <el-input v-model="addForm.pod_button_name" placeholder="请输入POD按钮名称"></el-input>
        </el-form-item>
        <el-form-item label="POD按钮触发器" prop="pod_function">
          <el-input
            v-model="addForm.pod_function"
            placeholder="请选择POD按钮触发器"
          >
          <template #suffix>
          <i class="el-input__icon el-icon-search" @click="addpodFunctiont"></i>
          </template>
          </el-input>
        </el-form-item>
        <el-form-item label="POD按钮样式" prop="pod_icon">
          <el-select
            v-model="addForm.pod_icon"
            placeholder="请选择POD按钮样式"
            
          >
            <el-option label="A" value="btn btn-primary marR10"></el-option>
            <el-option label="B" value="btn btn-default"></el-option>
            <el-option label="C" value="btn btn-success"></el-option>
            <el-option label="D" value="btn btn-info"></el-option>
            <el-option label="E" value="btn btn-warning"></el-option>
            <el-option label="F" value="btn btn btn-grey marR10"></el-option>
            <el-option label="G" value="btn btn-default"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" prop="by_user">
          <el-input v-model="addForm.by_user" placeholder="请输入创建人"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="create_time">
          <el-input v-model="addForm.create_time" placeholder="请输入创建时间"></el-input>
        </el-form-item>
      
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog title="编辑" v-model="editDialogVisible" width="40%">
      <!-- 编辑按钮二级对话框 -->
      <el-dialog
        title="按钮维护列表"
        v-model="addpodFunctiontDV"
        width="40%"
        append-to-body
      >
        <!-- 对话框内容 -->
        <el-table
          stripe
          border
          ref="multipleTable"
          :data="podFunctiontList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          size="small"
        >
          <el-table-column prop="id" label="id" width="60" align="center">
          </el-table-column>
          <el-table-column
            prop="site"
            label="站点编号"
            width="100"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="pod_function_no"
            label="pod功能编号"
            width="110"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="pod_function_name"
            label="pod功能名称"
            width="110"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="pod_function_url"
            label="pod功能路径"
            width="110"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            width="100"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="by_user"
            label="创建人"
            width="100"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
              <el-button size="mini" @click="editPodFunctiont(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNow"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rowCount"
        >
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addpodFunctiontDV = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 二级对话框结束 -->
      <!-- 对话框内容 -->
      <el-form
        :model="addForm"
        status-icon
        :rules="editFormrules"
        ref="editFormRef"
        label-width="140px"
      >
        <el-form-item label="所属站点" prop="site">
          <el-input v-model="editForm.site" placeholder="请选择所属站点"></el-input>
        </el-form-item>
        <el-form-item label="POD按钮编号" prop="pod_button_no">
          <el-input v-model="editForm.pod_button_no" placeholder="请输入POD按钮编号"></el-input>
        </el-form-item>
        <el-form-item label="POD按钮名称" prop="pod_button_name">
          <el-input v-model="editForm.pod_button_name" placeholder="请输入POD按钮名称"></el-input>
        </el-form-item>
        <el-form-item label="POD按钮触发器" prop="pod_function">
          <el-input
            v-model="editForm.pod_function"
            placeholder="请选择POD按钮触发器"
          >
          <template #suffix>
          <i class="el-input__icon el-icon-search" @click="editpodFunctiont"></i>
          </template>
          </el-input>
        </el-form-item>
        <el-form-item label="POD按钮样式" prop="pod_icon">
          <el-select
            v-model="editForm.pod_icon"
            placeholder="请选择POD按钮样式"
            
          >
            <el-option label="A" value="btn btn-primary marR10"></el-option>
            <el-option label="B" value="btn btn-default"></el-option>
            <el-option label="C" value="btn btn-success"></el-option>
            <el-option label="D" value="btn btn-info"></el-option>
            <el-option label="E" value="btn btn-warning"></el-option>
            <el-option label="F" value="btn btn btn-grey marR10"></el-option>
            <el-option label="G" value="btn btn-default"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" prop="by_user">
          <el-input v-model="editForm.by_user" placeholder="请输入创建人"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="create_time">
          <el-input v-model="editForm.create_time" placeholder="请输入创建时间"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      podButtonList:[],
      pageCount:1,
      pageNow:1,
      pageSize:10,
      rowCount:0,
            // 显示添加对话框
      addDialogVisible: false,
      // 显示编辑对话框
      editDialogVisible: false,
      // 显示按钮触发器对话框
      addpodFunctiontDV:false,
      podFunctiontList:[],
      addForm: {
        site: "*",
        pod_button_no: "",
        pod_button_name: "",
        pod_function: "",
        pod_icon:"",
        by_user: "",
        create_time: "",
      },
      editForm: {},
      addFormrules: {
        site: [
          {
            required: true,
            message: "请输入所属站点",
            trigger: "blur",
          },
        ],
        pod_button_no: [
          {
            required: true,
            message: "请输入POD按钮编号",
            trigger: "blur",
          },
        ],
        pod_button_name: [
          {
            required: true,
            message: "请输入POD按钮名称",
            trigger: "blur",
          },
        ],
        pod_function: [
          {
            required: true,
            message: "请输入POD按钮触发器",
            trigger: "blur",
          },
        ],
        pod_icon: [
          {
            required: true,
            message: "请输入POD按钮样式",
            trigger: "blur",
          },
        ],
        by_user: [
          {
            required: true,
            message: "请输入创建人",
            trigger: "blur",
          },
        ],
        create_time: [
          {
            required: true,
            message: "请输入创建时间",
            trigger: "blur",
          },
        ],
      },
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList(){
    let fromdata = new FormData();
    fromdata.append("pageSize",this.pageSize)
    fromdata.append("pageNow",this.pageNow)
    axios.post('/IE_MES/produce/pod_button_findPage.shtml',fromdata).then(
      res => {
        console.log(res.data.records);
        this.podButtonList = res.data.records
        this.pageCount = res.data.pageCount
        this.pageNow = res.data.pageNow
        this.pageSize = res.data.pageSize
        this.rowCount = res.data.rowCount
      }
    )
    },
    // 新增
    addDV(){
      this.addForm.by_user = 'admin'
      this.addForm.create_time = this.formatDate(Date.parse(new Date())) 
      this.addDialogVisible = true
    },
    add() {
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/produce/pod_button_addEntity.shtml",
        data: this.$qs.stringify({
          "podButtonFormMap.site": this.addForm.site,
          "podButtonFormMap.pod_button_no":
            this.addForm.pod_button_no,
          "podButtonFormMap.pod_button_name":
            this.addForm.pod_button_name,
          "podButtonFormMap.pod_function": this.addForm.pod_function,
          "podButtonFormMap.pod_icon": this.addForm.pod_icon,
          "podButtonFormMap.by_user": this.addForm.by_user,
          "podFupodButtonFormMapnctionFormMap.create_time": this.addForm.create_time,
        }),
      }).then((res) => {
        if (res.data == "success") {
          this.getList();
          this.$refs['addFormRef'].resetFields();
          this.addDialogVisible = false;
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        }
      });
    },
    addpodFunctiont() {
      this.addpodFunctiontDV = true
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/produce/pod_function_findPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        console.log(res.data);
        this.podFunctiontList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    addPodFunctiont(row){
      this.addForm.pod_function = row.pod_function_no
      this.addpodFunctiontDV = false
    },
        // 编辑
    editDialog(row) {
      this.editForm = JSON.parse(JSON.stringify(row));
      this.editForm.create_time = this.formatDate(JSON.parse(JSON.stringify(row)).create_time)
      this.editDialogVisible = true;
    },
    edit() {
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/produce/pod_button_editEntity.shtml",
        data: this.$qs.stringify({
          "podButtonFormMap.id":this.editForm.id,
          "podButtonFormMap.site": this.editForm.site,
          "podButtonFormMap.pod_button_no":
            this.editForm.pod_button_no,
          "podButtonFormMap.pod_button_name":
            this.editForm.pod_button_name,
          "podButtonFormMap.pod_function": this.editForm.pod_function,
          "podButtonFormMap.pod_icon": this.editForm.pod_icon,
          "podButtonFormMap.by_user": this.editForm.by_user,
          "podButtonFormMap.create_time": this.editForm.create_time,
        }),
      }).then((res) => {
        if (res.data == "success") {
          this.getList();
          this.editDialogVisible = false;
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
        }
      });
    },
    editpodFunctiont() {
      this.addpodFunctiontDV = true
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/produce/pod_function_findPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        console.log(res.data);
        this.podFunctiontList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    editPodFunctiont(row){
      this.editForm.pod_function = row.pod_function_no
      this.addpodFunctiontDV = false
    },
    // 删除
    del(row) {
      this.$confirm("此操作将永久删除该站点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            headers: {
              "Content-Type":
                "application/x-www-form-urlencoded; charset=UTF-8",
            },
            method: "post",
            url: "/IE_MES/produce/pod_button_deleteEntity.shtml?_t="+new Date(),
            data: this.$qs.stringify({
              ids:row.id
            }),
          }).then((res) => {
            if (res.data == "success") {
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.pageNow = newPage
      this.getList()
    },
    formatDate(data) {
        var date = new Date(data);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD + " " + hh + mm + ss;
    },
  }
}
</script>

<style lang="less" scoped>

</style>
